<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram: Two Charges on a Spring in an Electric Field</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Configuration ---
        const centerY = canvas.height / 2;
        const massRadius = 6;
        const springStartX = 140;
        const springEndX = 460;
        const mainFontStyle = "italic 24px 'Times New Roman'";
        const subFontStyle = "italic 16px 'Times New Roman'";
        const labelFontStyle = "24px 'Times New Roman'";

        // --- Helper Functions ---

        /**
         * Draws an arrow from (fromX, fromY) to (toX, toY).
         * @param {CanvasRenderingContext2D} ctx - The canvas context.
         * @param {number} fromX - Starting x-coordinate.
         * @param {number} fromY - Starting y-coordinate.
         * @param {number} toX - Ending x-coordinate.
         * @param {number} toY - Ending y-coordinate.
         * @param {number} headLength - Length of the arrowhead sides.
         */
        function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 12) {
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            // Draw arrowhead
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        /**
         * Draws a spring (coil) between two points.
         * @param {CanvasRenderingContext2D} ctx - The canvas context.
         * @param {number} x1 - Starting x-coordinate.
         * @param {number} y1 - Starting y-coordinate.
         * @param {number} x2 - Ending x-coordinate.
         * @param {number} y2 - Ending y-coordinate.
         * @param {number} coils - Number of coils in the spring.
         * @param {number} amplitude - Amplitude of the coils.
         */
        function drawSpring(ctx, x1, y1, x2, y2, coils, amplitude) {
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            
            const length = x2 - x1;
            const numPoints = 200; // Resolution of the curve

            for (let i = 0; i <= numPoints; i++) {
                const progress = i / numPoints;
                const x = x1 + progress * length;
                const y = y1 + amplitude * Math.sin(progress * coils * 2 * Math.PI);
                ctx.lineTo(x, y);
            }
            
            ctx.stroke();
        }

        // --- Main Drawing Logic ---

        // Set default styles
        ctx.fillStyle = 'black';
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;

        // 1. Draw Uniform Electric Field (E)
        const fieldY1 = centerY - 100;
        const fieldY2 = centerY + 100;
        const fieldStartX = 40;
        const fieldEndX = canvas.width - 40;
        
        drawArrow(ctx, fieldStartX, fieldY1, fieldEndX, fieldY1);
        drawArrow(ctx, fieldStartX, fieldY2, fieldEndX, fieldY2);

        ctx.font = mainFontStyle;
        ctx.fillText('E', fieldEndX + 10, fieldY1 + 8);
        ctx.fillText('E', fieldEndX + 10, fieldY2 + 8);


        // 2. Draw the two masses (as filled circles)
        const massY = centerY;
        const mass1X = springStartX;
        const mass2X = springEndX;

        ctx.beginPath();
        ctx.arc(mass1X, massY, massRadius, 0, 2 * Math.PI);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(mass2X, massY, massRadius, 0, 2 * Math.PI);
        ctx.fill();

        // 3. Draw the spring connecting the masses
        ctx.lineWidth = 1.5;
        drawSpring(ctx, mass1X, massY, mass2X, massY, 15, 10);
        ctx.lineWidth = 2; // Reset line width for subsequent drawings

        // 4. Draw all labels
        
        // Labels for mass 1 (m₁, Q₁)
        ctx.textAlign = 'left';
        const labelY = massY - 30;
        let currentX = mass1X - 45;

        ctx.font = mainFontStyle;
        ctx.fillText('m', currentX, labelY);
        currentX += ctx.measureText('m').width;

        ctx.font = subFontStyle;
        ctx.fillText('1', currentX, labelY + 5);
        
        ctx.font = mainFontStyle;
        currentX += ctx.measureText('1, ').width - 7;
        ctx.fillText(', Q', currentX, labelY);
        currentX += ctx.measureText(', Q').width;

        ctx.font = subFontStyle;
        ctx.fillText('1', currentX, labelY + 5);

        // Label "1" below mass 1
        ctx.textAlign = 'center';
        ctx.font = labelFontStyle;
        ctx.fillText('1', mass1X, massY + 40);


        // Labels for mass 2 (m₂, Q₂)
        ctx.textAlign = 'left';
        currentX = mass2X - 35;

        ctx.font = mainFontStyle;
        ctx.fillText('m', currentX, labelY);
        currentX += ctx.measureText('m').width;

        ctx.font = subFontStyle;
        ctx.fillText('2', currentX, labelY + 5);

        ctx.font = mainFontStyle;
        currentX += ctx.measureText('2, ').width - 7;
        ctx.fillText(', Q', currentX, labelY);
        currentX += ctx.measureText(', Q').width;

        ctx.font = subFontStyle;
        ctx.fillText('2', currentX, labelY + 5);

        // Label "2" below mass 2
        ctx.textAlign = 'center';
        ctx.font = labelFontStyle;
        ctx.fillText('2', mass2X, massY + 40);


        // Label for the spring (k, L)
        ctx.textAlign = 'center';
        ctx.font = mainFontStyle;
        ctx.fillText('k, L', (springStartX + springEndX) / 2, massY + 45);

    </script>
</body>
</html>